<template>
	<div>
		<!-- 自定义状态栏 -->
		<uni-nav-bar 
			:left-icon="leftIcon" 
			title="人员去向"
			status-bar="true"
			background-color="#F8F8F8"
			fixed="true"
			@clickLeft="animations('left','0')"
		>
		</uni-nav-bar>
		<!-- 三级地区联动 -->
		<wux-cascader :visible="cascaderVisible" :default-value="value1" title="所在地区" :options="selectAddress" @close="cascaderOnClose" @change="cascaderChange" />
		<!-- 内容主体 -->
		<div class="personnel">
			<!-- 搜索栏 -->
			<indexSearchBar :positionCity="regionName" :onClickSearch="navigateToSearchPage" @showSelect="showSelect"/>

			<!-- 导航栏 -->
			<div class="nav">
				<img src="/static/images/nav_bg.png">
				<div class="organ" @click="onClickOrgan()" :class="{'active':navIndex==1}">政府部门({{organList.length || 0}})</div>
				<!-- <div class="grassroots" @click="onClickGrassroots()" :class="{'active':navIndex==2}">基层单位({{grassrootsLength || 0}})</div> -->
				<div class="street" @click="onClickStreet()" :class="{'active':navIndex==3}">乡镇街道({{streetList.length || 0}})</div>
			</div>
			
			<!-- 机关单位列表 -->
			<div class="unit-box" v-if="navIndex == 1 && !swiperFlag">
				<div class="unit-box-content" :animation="ani">
					<div class="cell-list">
						<block v-if="organList.length !== 0">
							<div>
								<block v-for="(item,index) in organList" :key="index">
									<block v-if="!!item.basicCompany">
										<cell :listItem="item" @getData="getTowGrassrootsList"/>
									</block>
									<block v-else>
										<div @click="showMes">
											<cell :listItem="item" />
										</div>
									</block>
								</block>
							</div>
						</block>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
					<div class="secondary">
						<div class="secondary-list" v-for="(item,index) in organListSecondary" :key="index" @click="getPersonnelList(item.id,item.name);getjJobTime(item.id)">{{item.name}}</div>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
				</div>
			</div>

			<!-- 基层列表 -->
			<div class="unit-box" v-if="navIndex == 2 && !swiperFlag">
				<div class="unit-box-content" :animation="ani">
					<div class="cell-list">
						<block v-if="grassrootsList.length !== 0">
							<div>
								<block v-for="(item,index) in grassrootsList" :key="index">
									<block v-if="!!item.basicCompany">
										<cell :listItem="item" @getData="getTowGrass" rightTextShow="0"/>
									</block>
									<block v-else>
										<div @click="showMes">
											<cell :listItem="item" />
										</div>
									</block>
								</block>
							</div>
						</block>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
					<div class="secondary">
						<div class="secondary-list" v-for="(item,index) in grassrootsSecondary" :key="index" @click="getPersonnelList(item.id,item.name);getjJobTime(item.id)">{{item.name}}</div>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
				</div>
			</div>
			<!-- 城镇街道 -->
			<div class="unit-box" v-if="navIndex == 3 && !swiperFlag">
				<div class="unit-box-content" :animation="ani">
					<div class="cell-list">
						<block v-if="streetList.length !== 0">
							<div>
								<block v-for="(item,index) in streetList" :key="index">
									<block v-if="!!item.basicCompany">
										<cell :listItem="item" @getData="getTowStreetList"/>
									</block>
									<block v-else>
										<div @click="showMes">
											<cell :listItem="item" />
										</div>
									</block>
								</block>
							</div>
						</block>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
					<div class="secondary">
						<div class="secondary-list" v-for="(item,index) in streetSecondary" :key="index" @click="getPersonnelList(item.id,item.name);getjJobTime(item.id)">{{item.name}}</div>
						<div class="line">
							<div class="left"></div>
							<div class="right"></div>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 轮播图 -->
			<block v-if="personList.length == 0 && officeList.length == 0 && swiperFlag">
				<swiperBox />
			</block>

			<!-- 人员信息统计栏 -->
			<statisticsBox :statisticsData="statisticsData" :workingHours="workingHours" v-if="personList.length !== 0"/>

			<!-- 关键词搜索单位列表 -->
			<div class="offic-list" v-if="personList.length == 0 && officeList.length !== 0">
                <div class="offic-list-item" v-for="(item,index) in officeList" :key="index" @click="getPersonnelList(item.id, item.name);getjJobTime(item.id)">
                    <div class="item-left">
                        <div class="offic-info">
                            <span>{{item.name}}</span>
                        </div>
                    </div>
                </div>
            </div>

			<!-- 人员信息列表 -->
			<block v-if="personList.length !== 0">
				<personList :personList="personList" :statisticsData="statisticsData" />
			</block>
		</div>
	</div>
</template>

<script>
	import cell from '@/components/Cell/Cell'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar"
	import statisticsBox from "@/components/StatisticsBox/StatisticsBox"
	import swiperBox from "@/components/SwiperBox/SwiperBox"
	import indexSearchBar from "@/components/IndexSearchBar/IndexSearchBar"
	import personList from "@/components/PersonList/PersonList"
	import { address } from "../../static/data/cityData.js"

	export default {
		data(){
			return{
				ani: null, //动画
				organList: [], //机关单位列表
				grassrootsList: [], //基层单位列表
				grassrootsSecondary: [], //基层下的2级单位列表
				streetList: [], //街道列表
				organListSecondary:[],//机关2级
				streetSecondary: [], //街道2级
				positionCity: '', //定位的城市
				personList:[],//人员列表(展示用)
				personListData: [], //人员列表(存储用)
				officeList:[],//单位列表
				columns: [],//单位名称列表
				columnsId: [],//单位ID
				selectDeptID: null,//选中的单位ID
				navIndex: -1, //导航序号
				leftIcon: '',
				statisticsData: {},//统计栏数据
				workingHours: {}, //上班时间
				regionName: '电白区' ,//获取区
				swiperFlag: true ,// 轮播图开关
				cascaderVisible: false,
				value1: [],
				selectAddress: address,
				grassrootsLength: 0 //基层单位数量
			}	
		},
		onLoad(options){
			if(options.keyword){
				this.getOfficelList(options.keyword);
				this.regionName = wx.getStorageSync('regionName')
				this.getRegionlDataList(this.regionName,0,'')
				this.getStreetDataList(this.regionName,3,'')
				this.getGrassrootsList(this.regionName)
				return
			}
			this.position();
		},
		onShow(){
			// this.position();
		},
		components: {
			cell,
			uniNavBar,
			statisticsBox,
			swiperBox,
			indexSearchBar,
			personList
		},
		methods:{
			showSelect(flag){
				this.cascaderVisible = flag;
			},
			cascaderOnClose() {
				this.cascaderVisible = false;
			},
			cascaderChange(e){
				if(e.detail.done){
					this.organList= [], //机关单位列表
					this.grassrootsList= [], //基层单位列表
					this.grassrootsSecondary= [], //基层下的2级单位列表
					this.streetList= [], //街道列表
					this.organListSecondary=[],//机关2级
					this.streetSecondary= [], //街道2级
					this.getRegionlDataList(e.detail.options[2].label,0,'')
					this.getStreetDataList(e.detail.options[2].label,3,'')
					this.getGrassrootsList(e.detail.options[2].label)
					this.regionName = e.detail.options[2].label
					this.navIndex = -1
					this.swiperFlag = true
					this.officeList = []
					this.personList = []
				}
			},
			//提示无基层
			showMes(){
				uni.showToast({
					title: "暂无基层单位",
					icon: 'none',
					duration: 2000
				})
			},
			//基层单位选项下的2级单位
			async getTowGrass(cellItem){
				let paramas = {
					regionName: this.regionName,
					unitId: cellItem.id,
				}
				let res = await this.$http.getTowGrass(paramas)
				if(res.data.success && res.data.code == 200){
					this.grassrootsSecondary = res.data.result
					this.animations('left','-750rpx');
				}else{
				}
			},
			//获取机关单位下2级基层单位
			getTowGrassrootsList(cellItem){
				this.getRegionlDataList(this.regionName,1,cellItem.id,cellItem)
			},
			//获取街道下2级基层单位
			getTowStreetList(cellItem){
				this.get2StreetDataList(cellItem.id)
			},
			//获取街道列表
			async getStreetDataList(district,type,townShipId){
				let paramas = {
					regionName: district,
					type:type,
					townShipId : townShipId 
				}
				let res = await this.$http.getStreetDataList(paramas)
				if(res.data.success && res.data.code == 200){
					this.streetList = res.data.result
				}else{
				}
			},
			//获取2级街道列表
			async get2StreetDataList(townShipId){
				let paramas = {
					townShipId : townShipId 
				}
				let res = await this.$http.getTowStreetDataList(paramas)
				if(res.data.success && res.data.code == 200){
					this.streetSecondary = res.data.result
					this.animations('left','-750rpx');
				}else{
				}
			},
			//动画
			animations(direction,distance){
				var animation = wx.createAnimation({
					duration:300,
					timingFunction:'ease',
				});
				animation[direction](distance).step()
				this.ani =  animation.export()
				if(distance == 0){
					this.leftIcon = ''
				}else{
					this.leftIcon = 'back' //显示返回按钮
				}
			},
			navigateToSearchPage(){
				uni.navigateTo({
					url: '/pages/search/index'
				})
			},
			//获取人员列表
        	async getPersonnelList(deptID,name){
				let res = await this.$http.getPersonnelList(deptID)
				if(res.statusCode == 200 && res.data.code == 200){
					if(!res.data.result || !res.data.result.elist){
						this.personList = [];
						this.selectDeptID = null;
						setTimeout(()=>{
							uni.showToast({
								title: "该单位暂无人员数据",
								icon: 'none',
								duration: 2000
							})
						},300)
						return
					}
					this.selectDeptID = deptID; //储存ID
					let list = res.data.result.elist || [];
					let	onlineNum = 0; //在岗人数
					let	meetingNum = 0;//开会人数
					let	outNum = 0;//外出人数
					let	trainingNum = 0;//培训人数
					let	leaveNum = 0;//暂离人数
					let	takeLeaveNum = 0;//请假人数
					let	rest = 0;//休息人数
					let	other = 0;//其他人数
					let party = 0; //党员数
					list.forEach((item,index)=>{
						if(!item.avatar){
							item.avatar = '/static/images/user.png'
						}
						if(item.isParty == 0){
							party++;
						}
						switch (item.status) {
							case "0":
								onlineNum++;
								item.stata = "在岗";
								break;
							case "1":
								meetingNum++;
								item.stata = "开会";
								break;
							case "2":
								outNum++;
								item.stata = "外出";
								break;
							case "3":
								takeLeaveNum++;
								item.stata = "请假";
								break;
							case "4":
								leaveNum++;
								item.stata = "暂离";
								break;
							case "5":
								other++;
								item.stata = "待班";
								break;
							case "6":
								rest++;
								item.stata = "休息";
								break;
							case "7":
								other++;
								item.stata = "下班";
								break;
							case "9":
								trainingNum++
								item.stata = "培训";
								break;
							default:
								other++;
								item.stata = "无状态";
						} 
					})
					this.personList = list; //展示用
					this.personListData = list; //存储用

					this.statisticsData.personNum = list.length; //单位总人数
					this.statisticsData.onlinePro = ((onlineNum / this.statisticsData.personNum)* 100).toFixed(1); //在岗率
					this.statisticsData.onlineNum = onlineNum; //在岗人数
					this.statisticsData.meetingNum = meetingNum;//开会人数
					this.statisticsData.outNum = outNum;//外出人数
					this.statisticsData.trainingNum = trainingNum;//培训人数
					this.statisticsData.leaveNum = leaveNum;//暂离人数
					this.statisticsData.takeLeaveNum = takeLeaveNum;//请假人数
					this.statisticsData.rest = rest;//休息人数
					this.statisticsData.other = other;//其他人数
					this.statisticsData.partyNum = party;//党员数
					this.statisticsData.partyPro = ((party / this.statisticsData.personNum)* 100).toFixed(1); //在岗率
					this.statisticsData.selectDefault = name; //选择的公司
					this.navIndex = -1;
					this.swiperFlag = true;
					this.leftIcon = '';
					this.officeList = [];
					
				}else{
				}
			},
			//获取上班时间
			async getjJobTime(deptId){
				let paramas = {
					deptId: deptId
				}
				uni.showLoading(
					{
						title: '加载中',
					}
				)
				let res = await this.$http.getjJobTime(paramas)
				if(res.statusCode == 200 && res.data.code == 200){
					if(res.data.result.length != 0){
						this.workingHours.morningStart = res.data.result[0].dayList[0].beginTime;
						this.workingHours.morningEnd = res.data.result[0].dayList[0].endTime;
						this.workingHours.afternoonStart = res.data.result[0].dayList[1].beginTime;
						this.workingHours.fternoonEnd = res.data.result[0].dayList[1].endTime;
					}
				}
			},
			//根据关键词获取列表
			async getOfficelList(keyWords){
				let paramas = {
					deptName: keyWords
				}
				let res = await this.$http.getOfficelList(paramas)
				if(res.statusCode == 200 && res.data.code == 200){
					let list = res.data.result;
					if(list.length == 0){
						setTimeout(()=>{
							uni.showToast({
								title: "该单位暂无人员信息",
								icon: 'none',
								duration: 3000
							})
						},300)
						return
					}
					this.officeList = list;
					this.personList = [];
				}else{
				}
			},
			//获取基层列表一级
			async getGrassrootsList(district=""){
				let paramas = {
					regionName: district
				}
				uni.showLoading(
					{
						title: '加载中',
					}
				)
				let res = await this.$http.getGrassrootsList(paramas)
				if(res.data.code == 200){
					let len = 0;
					res.data.result.forEach((item,index)=>{
						len = len + item.basicCompany
					})
					if(len == 0){
						this.grassrootsLength = len;
						this.grassrootsList = [];
						return
					}
					this.grassrootsLength = len;
					this.grassrootsList = res.data.result;

				}else{
				}

			},
			//根据条件获取单位数据
			async getRegionlDataList(district="",companyType,companyId='',cellItem){
				let paramas = {
					regionName: district,
					companyType:companyType,
					companyId: companyId,
				}
				this.regionName = district; //保存区
				wx.setStorageSync('regionName', district)

				uni.showLoading(
					{
						title: '加载中',
					}
				)
				let res = await this.$http.getRegionlDataList(paramas)
				if(res.data.success && res.data.code == 200){
					if(companyType == 0){
						this.organList = res.data.result;
					}else if(companyType == 1 && companyId){ //机关2级
						 let arr = res.data.result;
						this.organListSecondary = res.data.result;
						this.animations('left','-750rpx');
					}
				}else{
					setTimeout(()=>{
						uni.showToast({
							title: "该地区暂未开通",
							icon: 'none',
							duration: 3000
						})
					},300)
				}
			},
			//点击机关单位
			onClickOrgan(){
				if(this.navIndex != 1){
					this.animations('left','0')
				}
				if(!!!this.organList || this.organList.length == 0){
					uni.showToast({
						title: "暂无数据",
						icon: 'none',
						duration: 1000
					})
					this.navIndex = 1;
					this.swiperFlag = true
					return
				}
				this.navIndex = 1;
				this.swiperFlag = false;
			},
			//点击基层单位
			onClickGrassroots(){
				if(this.navIndex !=2){
					this.animations('left','0')
				}
				if(!!!this.grassrootsList || this.grassrootsList.length == 0){
					uni.showToast({
						title: "暂无数据",
						icon: 'none',
						duration: 1000
					})
					this.navIndex = 2;
					this.swiperFlag = true
					return
				}
				this.navIndex = 2;
				this.swiperFlag = false;
			},
			//点击城镇街道
			onClickStreet(){
				if(this.navIndex !=3){
					this.animations('left','0')
				}
				if(!!!this.streetList || this.streetList.length == 0){
					uni.showToast({
						title: "暂无数据",
						icon: 'none',
						duration: 1000
					})
					this.navIndex = 3;
					this.swiperFlag = true
					return
				}
				this.navIndex = 3;
				this.swiperFlag = false;
			},
			// 定位
			position(){
				var This = this;
				//获取当前位置经纬度
				wx.getLocation({
					type: 'wgs84',
					success: function (res) {
						//发送请求通过经纬度反查地址信息  
						var getAddressUrl = "https://apis.map.qq.com/ws/geocoder/v1/?location=" + res.latitude + "," + res.longitude + "&key=DTYBZ-MNUCV-HQOP3-UD5FF-BLBQT-ATFI2&get_poi=1";
						uni.request({
							url: getAddressUrl,
							success: res => {
								This.positionCity = res.data.result.address_component.city;
								This.regionName = res.data.result.address_component.district;
								This.getRegionlDataList(This.regionName,0,'')
								This.getStreetDataList(This.regionName,3,'')
								This.getGrassrootsList(This.regionName)
							},
							fail: err => {
								This.position()
							},
							complete: res =>{
								uni.hideLoading()
							}
						})
					}
				}) 
			}
		}
	}
</script>

<style lang="scss" scoped>
	.personnel{
		background-color: #e4e4e4;
		min-height: 100vh;
		overflow: hidden;
		z-index: -2;
		.nav{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 113rpx;
			padding: 0 28rpx;
			position: relative;
			>div{
				width:48%;
				height:84rpx;
				line-height: 84rpx;
				text-align: center;
				background-color: #fff;
				color: #666666;
				font-size: 26rpx;
				font-weight: bold;
				z-index: 2;
			}
			.active{
				background-color: #f83619;
				color: #ffffff;
				z-index: 2;
			}
			>img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 113rpx;
				z-index: 1;
			}
		}
		.unit-box{
			width: 100%;
			height: 100vh;
			overflow: hidden;
			box-sizing: border-box;
			.unit-box-content{
				width: 1500rpx;
				height: 100vh;
				overflow: hidden;
				position: relative;
				left: 0;
				.cell-list{
					width: 750rpx;
					max-height: 90vh;
					overflow-x: hidden;
					position: absolute;
					top: 0;
					left: 0;
					padding-bottom: 400rpx;
				}
				.secondary{
					width: 750rpx;
					max-height: 90vh;
					padding: 0 30rpx;
					background-color: #fff;
					overflow-x: hidden;
					position: absolute;
					top: 0;
					left: 750rpx;
					.secondary-list{
						height: 104rpx;
						line-height: 104rpx;
						font-size: 28rpx;
						color: #838383;
						border-bottom: 1rpx solid #e4e4e4;
					}
					.secondary-list:nth-last-child(1){
						border-bottom: 1rpx solid #ffffff;
					}
				}
				.line{
					width: 100%;
					min-height: 304rpx;
					background-color: #e4e4e4;
					position: relative;
					.left,
					.right{
						width: 30rpx;
						height: 304rpx;
						background-color: #e4e4e4;
						position: absolute;
						top: 0;
					}
					.left{
						left: -30rpx;
					}
					.right{
						right: -30rpx;
					}
				}
			}
		}
		.offic-list{
            height: 90vh;
            overflow: scroll;
            padding-bottom: 408rpx;
            .offic-list-item{
                width: 694rpx;
                height: 115rpx;
                margin: 0 auto;
                background-color: #fff;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 24rpx;
                padding: 0 3rpx;
				box-shadow: #bbb 0rpx 5rpx 8rpx;
				border-radius: 3rpx;
                .item-left{
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .offic-info{
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        span{
                            font-size:36rpx;
                            -webkit-transform:scale(0.8);
                            font-weight: 600;
                        }
                    }
                }
            }
        }
	}
	.bgf{
		background-color: #fff !important;
	}
</style>